<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/lib/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/lib/validator/bootstrapValidator.min.css">

    <title>Document</title>
</head>

<body>
    <div class="register form" style="width: 200xp; height: 50px;"></div>
    <script src="./assets/lib/jquery-3.6.0.min.js"></script>
    <script src="../assets/lib/bootstrap/bootstrap.min.js"></script>
    <script src="../assets/lib/validator/bootstrapValidator.min.js"></script>
    <script>
        function test() {
            return {
                fields: {
                    username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
                        validators: {
                            notEmpty: { //不能为空
                                message: '用户名不能为空.'
                            },
                            stringLength: { //检测长度
                                min: 2,
                                max: 15,
                                message: '用户名需要2~15个字符'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: { //检测长度
                                min: 6,
                                max: 15,
                                message: '密码需要6~15个字符'
                            }
                        }
                    }
                }
            }
        }
        // 语法：
        // $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}

        // 比如，注册
        $('.register form').bootstrapValidator(test()).on('success.form.bv', function(e) {
            e.preventDefault();
            // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
        });
    </script>
</body>

</html>